<template>
  <div class="login-page">
    <!-- 返回按钮 -->
    <!-- <van-nav-bar
      title="登录"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    
    <!-- Logo区域 -->
    <div class="logo-container">
      <img src="@/assets/doctor/logo.jpg" class="logo">
    </div>

    <!-- 登录表单 -->
    <van-form @submit="onSubmit" class="login-form">
      <van-cell-group inset class="form-group">
        <!-- 手机号输入框 -->
        <van-field
          v-model="username"
          type="tel"
          placeholder="请输入手机号码"
          :rules="[{ required: true, message: '请填写手机号' }]"
          class="custom-field"
        >
          <template #left-icon>
            <van-icon name="user-o" class="field-icon" />
          </template>
        </van-field>
        
        <!-- 密码输入框 -->
        <van-field
          v-model="password"
          type="password"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          class="custom-field"
        >
          <template #left-icon>
            <van-icon name="lock" class="field-icon" />
          </template>
        </van-field>

        <!-- 验证码区域 -->
        <van-field
          v-model="captcha"
          center
          placeholder="请输入验证码"
          class="custom-field"
        >
          <template #left-icon>
            <van-icon name="shield-o" class="field-icon" />
          </template>
          <template #button>
            <van-image
              width="100"
              height="32"
              :src="captchaUrl"
              @click="refreshCaptcha"
            />
          </template>
        </van-field>
      </van-cell-group>

      <!-- 登录按钮 -->
      <div class="submit-btn-wrapper">
        <van-button 
          round 
          block 
          type="primary" 
          native-type="submit"
          color="#26c99d"
          class="submit-btn"
        >
          立即登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import md5 from 'md5-js';
import { generateCaptcha, drawCaptcha } from '@/utils/captcha';
import { useUserStore } from '@/stores/user';
const router = useRouter();
const username = ref('');
const password = ref('');
const captcha = ref(''); // 替换原有的 smsCode
const captchaUrl = ref(''); // 用于存储验证码图片URL
const currentCaptcha = ref(''); // 存储当前验证码的实际值

const userStore = useUserStore();
// 刷新验证码
const refreshCaptcha = () => {
  const code = generateCaptcha(4);
  currentCaptcha.value = code;
  captchaUrl.value = drawCaptcha(code);
};

// 初始化时获取验证码
refreshCaptcha();
const handleLogin = async() => {
  const result = await userStore.login({
    username: username.value,
    password: md5(password.value)
  })
  if (result.success) {
    showToast('登录成功')
  } else {
    showToast(result.message)
  }
}
const onSubmit = async (values) => {
  try {
    if (!captcha.value) {
      showToast('请输入验证码');
      return;
    }
    if (captcha.value.toLowerCase() !== currentCaptcha.value.toLowerCase()) {
      showToast('验证码错误');
      refreshCaptcha();
      captcha.value = '';
      return;
    }

    handleLogin();

    console.log('form submitted', values);
    showToast('登录成功');
    // router.push('/home'); // 登录成功后跳转
  } catch (error) {
    showToast('登录失败');
  }
};

const onClickLeft = () => {
  router.back();
};

const isVerified = ref(false);

const onVerificationSuccess = () => {
  isVerified.value = true;
};

// const onSubmit = async (values) => {
//   try {
//     if (!isVerified.value) {
//       showToast('请先完成滑动验证');
//       return;
//     }
//     // 这里添加登录逻辑
//     console.log('form submitted', values);
//     showToast('登录成功');
//     // router.push('/home'); // 登录成功后跳转
//   } catch (error) {
//     showToast('登录失败');
//   }
// };
</script>

<style scoped>
.login-page {
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  /* padding: 0 20px; */
}

.logo-container {
  width: 100%;
  /* padding: 60px 0 40px; */
  text-align: center;
}

.logo {
  width: 100%;
  /* max-width: 300px; */
  height: auto;
}

.login-form {
  /* margin-top: 10px; */
}

.form-group {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

:deep(.custom-field) {
  padding: 12px 16px;
}

:deep(.field-icon) {
  font-size: 18px;
  color: #26c99d;
  margin-right: 8px;
}

:deep(.van-field__control) {
  font-size: 15px;
}

:deep(.van-field__control::placeholder) {
  color: #999;
}

.verify-btn {
  border-radius: 4px;
  font-size: 14px;
  height: 32px;
  padding: 0 12px;
  background: #26c99d;
  border: none;
}

.submit-btn-wrapper {
  margin: 32px 16px;
}

.submit-btn {
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(38, 201, 157, 0.3);
}

:deep(.van-cell) {
  padding: 12px 16px;
  align-items: center;
}

:deep(.van-cell::after) {
  border-bottom: 1px solid #f5f5f5;
}

:deep(.van-cell-group--inset) {
  margin: 0;
}

:deep(.van-field__control) {
  height: 24px;
  line-height: 24px;
}

:deep(.van-nav-bar) {
  background-color: transparent;
}

:deep(.van-nav-bar__title) {
  color: #fff;
}

:deep(.van-nav-bar .van-icon) {
  color: #fff;
}
</style>